<template>
  <div class="organizationTrend">
    <div class="main">
      <table cellspacing="0">
        <thead>
          <tr>
            <th v-for="item in titleList" :key="item.key" :style="{ background: item.backgroundColor }">
              <div class="thDis" @click="sortTap(item)">
                <span> {{ item.name }}</span>
                <!-- <div v-if="item.sort" class="o">
                  <span :class="{ sa: sortKey === item.key && sortCls === 'sa' }" class="s"></span>
                  <span :class="{ xa: sortKey === item.key && sortCls === 'xa' }" class="x"></span>
                </div> -->
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          <!-- 合计行数据 -->
          <tr class="count">
            <td>{{ totalList[0].comname2 }}</td>
            <td>{{ totalList[0].noCarPremium }}</td>
            <td>{{ totalList[0].premium }}</td>
            <td>{{ totalList[0].premiumHuanbi }}</td>
            <td>{{ totalList[0].premiumPer }}</td>
            <td>{{ totalList[0].premiumRate }}</td>
            <td>{{ totalList[0].premiumTargetM }}</td>
            <td>{{ totalList[0].premiumTongbi }}</td>
          </tr>
          <!-- 列表数据 -->
          <tr v-for="item in dataList" :key="item.comname2">
            <td>{{ item.comname2 }}</td>
            <td>{{ item.premiumTargetM }}</td>
            <td>{{ item.premiumRate }}</td>
            <td>{{ item.noCarPremium }}</td>
            <td>{{ item.premium }}</td>
            <td>{{ item.premiumHuanbi }}</td>
            <td>{{ item.premiumPer }}</td>

            <td>{{ item.premiumTongbi }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
// 引入数据
import { totalList, dataList, titleList } from "./dataList.js";
export default {
  components: {},
  props: {},
  data() {
    return {
      sortKey: "", // 排序key值
      sortCls: "xa", // 排序验收
      lastX: 0,
      // 头部列表
      titleList: [],
      // 合计数据 头部数据
      totalList: null,
      // 列表数据
      dataList: null,
      opstOpenFlag: false, // 展开更多标志  false - 加载更多   true - 收起s
    };
  },
  created() {
    // 引入数据
    this.totalList = totalList;
    this.dataList = dataList;
    this.titleList = titleList;
  },
  methods: {
    // 点击排序
    sortTap(item) {
      if (!item.sort) {
        return console.warn("没有排序字段");
      }
      // sa表示正序  xa表示倒叙  进行互相切换
      this.sortCls === "sa"
        ? (this.sortCls = "xa")
        : this.sortCls === "xa"
        ? (this.sortCls = "sa")
        : (this.sortCls = "xa");

      // 排序字段
      this.sortKey = item.key;
      // 开始排序
      this.dataList.sort((a, b) => {
        // 先转字符串处理
        let aval = a[item.key] + "";
        let bval = b[item.key] + "";
        // 去除数据中的百分号
        if (aval.includes("%")) {
          aval = aval.split("%")[0] || 0;
        }
        if (bval.includes("%")) {
          bval = bval.split("%")[0] || 0;
        }
        // 去除数据中的逗号
        if (aval.includes(",")) {
          aval = aval.split(",").join("") || 0;
        }
        if (bval.includes(",")) {
          bval = bval.split(",").join("") || 0;
        }
        return this.sortCls === "sa" ? aval - bval : bval - aval;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* ===================================公共样式=============================== */

//定义样式混合 使用@include调用该mixin  参数和默认值
@mixin flex_layout(
  $direction: column,
  $justify-content: flex-start,
  $align-items: flex-start,
  $flex-wrap: nowrap
) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify-content;
  align-items: $align-items;
  flex-wrap: $flex-wrap;
}
@mixin layout_init_base {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  //-webkit-overflow-scrolling: touch;
  overflow: hidden;
}
// 上三角
@mixin triangle-up($color: red, $size: 0.1) {
  width: 0;
  height: 0;
  border-left: $size + px solid transparent;
  border-right: $size + px solid transparent;
  border-bottom: $size * 1.2 + px solid $color;
}
// 下三角
@mixin triangle-down($color: red, $size: 0.1) {
  width: 0;
  height: 0;
  border-left: $size + px solid transparent;
  border-right: $size + px solid transparent;
  border-top: $size * 1.2 + px solid $color;
}
//
@mixin border-base($color: #000, $left: 0) {
  content: " ";
  position: absolute;
  left: $left;
  z-index: 2;
  color: $color;
}

// 添加下边框
@mixin border-bottom($color: #dbdbdb, $left: 0) {
  position: relative;
  &:after {
    @include border-base($color, $left);
    box-sizing: border-box;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid $color;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
  }
}
/* 添加右边框 */
@mixin border-right($color: #dbdbdb, $top: 0) {
  position: relative;
  &:before {
    @include border-base($color, $top);
    box-sizing: border-box;
    right: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-right: 1px solid $color;
    transform-origin: 100% 0;
    transform: scaleX(0.5);
  }
}

/* ===================================表格的主要样式=============================== */
h3 {
  margin-bottom: 10px;
}
// 最大容器
.organizationTrend {
  overflow: hidden;
}
.main {
  // width: 1000px;
  overflow: auto;
  font-size: 13px;
  height: 416px;
}
table {
  table-layout: fixed;
  // width: 720px;
}
// 设置头部的所有单元格为粘性定位 以及其它属性
thead tr th {
  position: sticky;
  left: 0;
  top: 0;
  background-color: #f2f5f7;
  min-width: 100px;
  height: 30px;
  border-right: 1px solid #dbdbdb;
  text-align: center;
}
// 设置头部的第一个单元格
thead tr th:first-child {
  z-index: 2;
  background-color: lightblue;
}

// 设置内容区的第一列单元格
tbody {
  tr {
    text-align: center;
  }
  tr td:first-child {
    position: sticky;
    left: 0;
    z-index: 0;
    height: 27px;
    background-color: #ffffff;
  }
  // 设置下边框线
  td {
    border-bottom: 1px solid #f4f4f4;
  }
  // 合计数据需要蓝色加粗
  .count {
    td {
      height: 27px;
      color: #146aff;
      font-weight: 600;
    }
  }
}

/* ==================================== 排序三角的样式==================================== */
.thDis {
  @include flex_layout(
    $direction: row,
    $align-items: center,
    $justify-content: center
  );
  .o {
    margin: 0 5px;
    @include flex_layout(
      $direction: column,
      $align-items: center,
      $justify-content: flex-start
    );
    .s {
      @include triangle-up($color: #7b7b7b, $size: 4);
      margin-bottom: 1px;
    }
    .sa {
      @include triangle-up($color: #6bb5ff, $size: 4);
      margin-bottom: 1px;
    }
    .x {
      @include triangle-down($color: #7b7b7b, $size: 4);
      margin-top: 1px;
    }
    .xa {
      @include triangle-down($color: #6bb5ff, $size: 4);
      margin-top: 1px;
    }
  }
}
</style>
